import 'package:flutter/material.dart';

class MyApp5 extends StatelessWidget {
  const MyApp5({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text(
            '容器组件container的使用',
            style: TextStyle(color: Colors.white),
          ),
          backgroundColor: const Color.fromARGB(255, 243, 171, 195),
          centerTitle: true,
        ),
        //容器组件
        body: Center(
          child: Container(
              //  MediaQuery.of(context).size.width:宽度百分百
              width: MediaQuery.of(context).size.width / 1.5,
              height: 300,
              //设置边框圆角->背景色必须设置在边框圆角内
              decoration: const BoxDecoration(
                  // borderRadius: BorderRadius.circular(20),
                  //BorderRadius.only(topLeft: Radius.circular(20)):单独设置四个方向的角
                  borderRadius: BorderRadius.only(topLeft: Radius.circular(20)),
                  color: Colors.green,

                  //边框
                  // border: Border.all(color: Colors.red, width: 5),
                  border: Border(
                      //单独设置边框
                      top: BorderSide(color: Colors.red, width: 5))),

              //内部盒子
              child: Container(
                color: Colors.amber,
                //EdgeInsets.all(20):设置所有外间距
                // margin: const EdgeInsets.all(30),EdgeInsets.only:四个方向分别设置
                margin: const EdgeInsets.only(
                    left: 20, right: 30, bottom: 20, top: 30),

                // padding: EdgeInsets.all(30),
                padding: const EdgeInsets.only(
                    left: 20, right: 30, bottom: 20, top: 30),
                //设置容器文字居中
                alignment: Alignment.center,
                child: const Text(
                  '我是一个容器组件',
                  style: TextStyle(fontSize: 20),
                ),
              )),
        ));
  }
}
